<!-- 
组件基础 - 简单组件应用
-->
<script setup lang="ts">
import { ref } from "vue";
import ButtonCounter from "./child01/ButtonCounter.vue";
import BlogPost01 from "./child01/BlogPost01.vue";
import BlogPost02 from "./child01/BlogPost02.vue";
import AlertBox from "./child01/AlertBox.vue";
import TabButton from "./child01/TabButton.vue";

const posts = ref([
    { id: 1, title: "My journey with Vue" },
    { id: 2, title: "Blogging with Vue" },
    { id: 3, title: "Why Vue is so fun" },
]);

const postFontSize = ref(1);
</script>

<template>
    <h2>简单组件</h2>
    <ButtonCounter />

    <h2>组件应用 1 - defineProps</h2>
    <BlogPost01 title="文章标题" />

    <h2>组件应用 2 - defineProps</h2>
    <BlogPost01 v-for="post in posts" :key="post.id" :title="post.title" />

    <h2>组件应用 3 - defineEmits</h2>
    <div :style="{ fontSize: postFontSize + 'em' }">
        <BlogPost02 title="监听事件" @enlarge-text="postFontSize += 0.1" />
    </div>

    <h2>组件应用 4 - 插槽 slot</h2>
    <AlertBox> Something bad happened. </AlertBox>

    <h2>组件应用 5 - 动态组件</h2>
    <TabButton />
</template>
